<template>
  <div class="flow" ref="main" style="width: 100%;height:100%; background-color: #FFFFFF;"></div>
</template>

<script>
  export default{
    props:{
      chartsData:Object
    },
    data(){
      return{
        data:{},
        // 展示数据
        showData:[],
        // 关系数据
        relatData:[]
      }
    },
    watch:{
      deep:true,
      chartsData:function(newV,oldV){
        this.data = newV
        // 数据处理
        this.dataDetil(this.data)

        this.initChart()
      }
    },
    methods:{
      initChart(){
        let myChart = this.$echarts.init(this.$refs.main);
          var colors = ["#5793f3", "#d14a61", "#675bba"];
          var option = {
            title: {
                text: ''
            },
            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 12
                    },
                }
            },
            legend: {
                x: "center",
                show: false,
                data: ["夫妻", "战友", '亲戚']
            },
            series: [

                {
                    type: 'graph',
                    layout: 'force',
                    symbolSize: 45,
                    focusNodeAdjacency: true,
                    // 加箭头
                    edgeSymbol:['arrow'],
                    // 箭头大小
                    edgeSymbolSize:10,
                    roam: true,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 12
                            },
                        }
                    },
                    force: {
                        repulsion: 1000
                    },
                    edgeSymbolSize: [4, 50],
                    edgeLabel: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 10
                            },
                            formatter: "{c}"
                        }
                    },
                    data: this.showData,
                    links:this.relatData,
                    lineStyle: {
                        normal: {
                            opacity: 0.9,
                            width: 1,
                            curveness: 0
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
      },
      // 数据处理
      dataDetil(data){
        this.showData = []
        this.relatData = []
        // 存放查询的实体
        var obj1 = {
          name: '',
          draggable: true,
          itemStyle: {
              normal: {
                  color: "#5793f3",
              }
          }
        }
        obj1.name = data.entity
        this.showData.push(obj1)


        this.dataInfo(data.to,data.entity)
      },
      // 数据递归
      dataInfo(ToData,resource){
        ToData.map(val => {
          //   // 存展示数据
            var obj = {
              name: '',
              draggable: true,
            }
            obj.name = val.entity
            this.showData.push(obj)


            // 存链接
            var relat = {
              source: '',
              target: '',
              value: ''
            }
            relat.target = resource
            relat.source = val.entity
            relat.value = val.relation
            this.relatData.push(relat)
            // 判断是否还有下一级
            if(val.to.length != 0){
              return this.dataInfo(val.to,val.entity)
            }
            return 0
        })
        return 0
      }
    },

  }
</script>

<style>
</style>
